<template>
  <div>
    <!-- <div class="box"></div>
    <img src="" ref="target" alt=""> -->
    <XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem>美食</XtxBreadItem>
    </XtxBread>
    <div id="father"></div>
    <button @click="handleClick" >提示</button>
  </div>
</template>

<script setup lang="ts">
  import Message from '@/components/message/index';
  const handleClick = ()=>{
    Message({type:'success',message:'请求成功'})
  }
  // import { h ,onMounted,render } from 'vue'
  // import XtxMessage from '@/components/message/index.vue'
  // //   h函数  创建虚拟dom
  // 参数1 是标签名/组件名
  // 参数2 是描述标签的属性是一个对象 可传一个null
  // 参数3 是标签/组件的内容
  //------------
  // render函数 渲染虚拟dom
  // 参数1 要渲染的虚拟dom
  // 参数2 要渲染虚拟dom的位置
  // 得在dom渲染完后的钩子内渲染虚拟dom
  //  const vnode =h('h1',{
  //   id:'header',
  //   className:'box'
  // },
  // '通过h函数创建的虚拟dom'
  // )
  //    const vnode =h(XtxMessage,{type:'error',message:'请求失败'})
  // onMounted(()=>[
  //   render(vnode,document.querySelector('#father')!)
  // ])
// import {useIntersectionObserver } from '@vueuse/core'
// import { ref } from 'vue';
// const target = ref<HTMLImageElement|null>(null)
// const {stop } =useIntersectionObserver(target,([{isIntersecting}],observerElement)=>{
//   console.log(isIntersecting,observerElement);
//   if(isIntersecting){
//     target.value!.src='https://img2.baidu.com/it/u=4226646530,1554171071&fm=253&fmt=auto&app=120&f=JPEG?w=596&h=596'
//     stop()
//   }
// })
</script>

<style scoped>
.box{
  height: 2000px;
  background-color: pink;
}
</style>